<template>
     <div id="course-show">
       <div class="topcoumt" style="margin: 0 70px">
           <div class="student-index-list">
                <el-row :gutter="70">
                    <el-col :span="6" style=" padding-right:25px; padding-left:25px">
                        <div class="add" @click="add">
                           <i class="iconfont icon-jiahao "></i>
                           <p >添加课程</p>
                        </div>
                    </el-col>
                    <el-col :span="6"  v-for=" (item ,index) in courseLists" :key="index"  style="position:relative; padding-right:25px; padding-left:25px">
                        <div class="grid-content" :class="{bc2:index%2===0,bc:index%2===1}"  @mouseenter="hoverImg(item,index)"  @mouseleave="leaveImg(item,index)" >
                            <img :src="item.iconPath"/>
                            <div class="mask"  @click.stop="detailFn(item.id,item.name)"></div>
                            <i class="iconfont icon-Group-" @click.stop="deleteFn(item.id)"></i>
                            <!-- 没有文件 -->
                            <input type="file"  class="fileInput"    
                            title="上传文件"  @change.stop="uploadFile(item.id,$event)" /><img src="../../../assets/images/upload.png" class="upload" title="123"  v-if='ishow == index && item.fileName==undefined'/>
                            <!-- 有文件 -->
                            <img src="../../../assets/images/file.png" class="fileNomal" v-if="item.fileName  &&  fileFlag != index"  /> 
                            <img src="../../../assets/images/files.png" class="fileName"  v-if="item.fileName  &&  fileFlag == index" title="文件已存在"  />
                            <img src="../../../assets/images/delete.png" class="delete" @click.stop="deleteFile(item.id)" v-if="item.fileName  &&  fileFlag == index" title="删除"  />
                            <input type="file"  class="fileInput2"   
                            title="上传文件"  @change.stop="uploadFile2(item.id,$event)"/><img src="../../../assets/images/upload.png" class="upload" v-if='item.fileName &&  fileFlag == index'  />
                        </div>
                         <p class="title">{{item.name}}</p>
                    </el-col>
                </el-row>
            </div>
       </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                  list:[],
                  setCourseId:'',
                  //课程列表
                  courseLists:'' ,
                  //没有文件
                  ishow:null,
                  //上传后显示文件
                  fileFlag:null,
            }
        },
        created () {
             // 初始化清空
            this.$localstorage.removeLocalStorage('setCourseId','')
            this.$localstorage.removeLocalStorage('CourseTitle','')
            this.init()
        },
        methods:{
            init(){
                let self = this
                self.$http.get('/tes/course/creation') .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.courseLists = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                })
            },
            //删除方法  // 没有测试等 写完班级
            commonFn(id){
                let self = this
                self.$confirm('课程被其他教师占用并含有学生,确定删除么？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    self.$http.delete('/tes/course/'+id+'?errorDealFlag=true') .then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                        }
                    })
                })
            },
            //删除
            deleteFn(id){
                let self = this
                self.$confirm('确定删除么？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
                self.$http.delete('/tes/course/'+id+'?errorDealFlag=') .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.$message({
                            message: '删除成功',
                            type: 'success'
                         })
                         self.init()
                    }else if(res.code == '501'){
                        this.commonFn(id)
                    } else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                    })
			    })
            },
            add(){
                this.$router.push({ path: '/Admin/CreativeCourse/CourseBaseInfo' })
            },
            //详情
            detailFn(id,name){
                console.log(1110)
                this.$localstorage.putLocalStorage('setCourseId', id) //设置值
                this.$localstorage.putLocalStorage('CourseTitle', name)
                 this.$router.push({
                    path: '/Admin/CreativeCourse/CourseBaseInfo',
                })
            },
            //删除上传文件
            deleteFile(id){
                let self =this
                self.$confirm('确定删除文件?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
                self.$http.post('/tes/course/'+id+'/preset-resource').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        self.init()
                    }else{
                        self.$message.error(res.message)
                    }
                 })
                })  
            },
            //鼠标经过文件上传
            uploadFile(id,$event){
                let self =this
                $event.stopPropagation();//原生阻止冒泡事件
                let fileType = $event.target.files[0].name
                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                let fileSize =  $event.target.files[0].size //上传文件大小B
                let size = fileSize /1024/1024  //得到mb
                console.log(size,1048576)
                if(fileType.toLowerCase() != "zip" && fileType.toLowerCase() != "rar"){
                    self.$message.error('请上传zip格式或者rar格式文件')
                    return
                }else if(size>1048576){
                    this.$message.error('文件不能大于2GB,请重新选择！')
                    return
                }
                 const loading = this.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })
                 let formData = new FormData();
                
                 formData.append('file', $event.target.files[0]); 
            
                 this.$http.post('/tes/course/'+id+'/preset-resource', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close() 
                        $event.target.value=''  
                        self.init()
                    }else{
                        loading.close()
                        $event.target.value=''  
                        self.$message.error(res.message)
                    }
                 })  
            },
            uploadFile2(id,$event){
                this.uploadFile(id,$event)
            },
            //鼠标经过变色
            hoverImg(item,index){
               // item.iconPath=item.iconPath+'.fan.png'
               //1 没有文件  2有文件
                if(item.fileName==undefined){ //没有文件时候
                   this.ishow = index
                }else{ 
                    this.ishow =null
                    this.fileFlag =index
                }

            },
            //鼠标离开变色
            leaveImg(item,index){
                if(item.fileName==undefined){ //没有文件时候
                   this.ishow =null
                }else{
                    this.fileFlag =null
                }
               // item.iconPath=item.iconPath.substr(item.iconPath,item.iconPath.lastIndexOf('.', item.iconPath.lastIndexOf('.') - 1) );
               //1 $('.upload').hide()
            },
            
        }
    }
</script>
<style scoped>
 .bc {
    background:url('../../../assets/images/bgcolor.png') no-repeat;
    width: 230px;
    border-radius: 6px;
    height: 125px;
    position: relative;
    
}
.bc2 {
    background:url('../../../assets/images/bgcolor2.png') no-repeat;
    width: 230px;
    border-radius: 6px;
    height: 125px;
    position: relative;
}
</style>
<style lang="scss" scoped>
 @import "./../../../styles/layout/color_variables";
  #course-show {
    width: $width;
    margin: 50px auto;
    color: #727272;
    .student-index-list{
       .el-row {
            margin-bottom: 20px;
            .add{
              border: 1px dashed #999;
              height: 127px;
              text-align:center;
              border-radius: 6px;
              color: #999;
              font-size: 14px;
              background: #fff;
              cursor: pointer;
                i{
                    display: inline-block;
                    margin-top: 54px
                }
              
                &:hover{
                    border: 1px dashed #1277eb;
                   // transform: scale(1.05);
                   // transition: transform .3s;
                    cursor: pointer;
                   // box-shadow: 0 0 20px #e0e0e0;
                   color: #1277eb
                }
            }
            .el-col {
                border-radius: 4px;
                margin-bottom: 20px;
               
                &>.grid-content{
                   // background: #495172;
                    //background:url('../../../assets/images/bgcolor.png') no-repeat;
                   // width: 230px;
                   // border-radius: 6px;
                   // height: 130px;
                    //position: relative;
                    &>img{
                        width: 180px;
                        // height: 90px;
                        margin: 0 auto;
                        padding-top: 14px;
                        display: block
                    }
                    
                    .icon-Group-{
                         color: #fff;
                         font-size: 20px;
                         position: absolute;
                         right:12px;
                         top: 15px;
                         cursor: pointer;
                         width: 20px;
                         height: 20px;
                         z-index: 8;
                    }
                    .fileInput{
                        position: absolute;
                        left: 14px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                        display: inline-block;
                        opacity: 0;
                        z-index: 999;
                    
                    }
                    .fileInput2{
                        position: absolute;
                        left: 14px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                        display: inline-block;
                        opacity: 0;
                        z-index: 999;
                        
                    }
                    .mask{
                        background: #000;
                        position: absolute;
                        left: 0px;
                        top: 0;
                        width: 230px;
                        height: 126px;
                        opacity: .2;
                        border-radius: 5px;
                        display: none
                    }
                    //下载图标
                    .upload{
                        position: absolute;
                        left: 14px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                       // display: none;
                    }
                    //文件
                    .fileName{
                        position: absolute;
                        left: 45px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                        //display: none;
                    }
                    //删除图标
                    .delete{
                        position: absolute;
                        left: 75px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                       // display: none;
                    }
                    //文件上传完毕
                    .fileNomal{
                        position: absolute;
                        left: 10px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                       // display: none;
                    }
                    &:hover{
                        .mask{
                            display: block
                        }
                        .icon-Group-{
                            opacity: .6;
                        }
                       //  box-shadow: 0 0 20px #aeaeae;
                        // transform: scale(1.05);
                        // transition: transform .3s;
                        cursor: pointer;
                         img{
                           transform: scale(1.05);
                           transition: transform .6s;
                         }
                    }
                    
                }
               
                &>.title{
                    text-align: center;
                    padding: 15px 0;
                    font-size: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                
            }
       }
    }
    .iconcase{
        margin-left: 20px;
    }
  }
</style>